<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
		<title>index</title>
		<link rel="stylesheet" href="../../source/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="../../source/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../source/plugins/datatables/jquery.dataTables.min.css" />
		<link rel="stylesheet" href="../../source/css/system.css" />
	</head>

	<body>
		<div class="admin-submain">
			<div class="layui-tab layui-tab-brief admin-subtab">
				<ul class="layui-tab-title" id="one-tab">
					<li class="layui-this">订单详情</li>
					<li>发货信息</li>
					<li>收款信息</li>
				</ul>
				<div class="layui-tab-content">
					
					<!--订单详情-->
					<div class="layui-tab-item layui-show">
						<div class="admin-tab-right">
							<span class="icon-wrapper">
								<button><i class="fa fa-print" aria-hidden="true"></i>打印</button>
								<button><i class="fa fa-share-square-o" aria-hidden="true"></i>导出</button>
								<button type="button" class="ant-btn ant-btn-ghost" id="datail-savebtn"><span>保 存</span></button>
							</span>
						</div>
						<section class="admin-list-detail">
							<div class="admin-collapse">
								<div class="admin-colla-item">
									<h2 class="admin-colla-title">
										<i class="fa fa-file-text-o" aria-hidden="true"></i>订单详情
									</h2>
									<div class="admin-colla-content">
										<ul class="info-list">
											<li class="info-listbox layui-elip width100">
												<label class="name">订单号：</label><div class="info detail-tips-hover">QD-1001QD-1001</div><span class="order-state">备货中</span>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">订单生成时间：</label><div class="info detail-tips-hover">2017-4-21  10：10</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">最迟交货时间：</label><div class="info detail-tips-hover">2017-5-04</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">预计制造天数：</label><div class="info detail-tips-hover">20天</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">厂址编号：</label><div class="info detail-tips-hover">156651651655</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">厂址名称：</label><div class="info detail-tips-hover">上海市有名制造厂</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">厂址地址：</label><div class="info detail-tips-hover">浙江省杭州市西湖区难休息休息街道</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">厂址联系人：</label><div class="info detail-tips-hover">王某某</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">联系人职务：</label><div class="info detail-tips-hover">技术总监</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">联系电话：</label><div class="info detail-tips-hover">15856214751</div>
											</li>
											<li class="info-listbox layui-elip width33">
												<a href="javascript::void;" class="contract-number">
													<label class="name">合同编号：</label>
													<div class="info detail-tips-hover">ht6581265458461313</div>
												</a>
											</li>
											<li class="info-listbox layui-elip width33">
												<label class="name">合同名称：</label><div class="info detail-tips-hover">改变世界</div>
											</li>
										</ul>
									</div>
								</div>
								<div class="admin-colla-item">
									<h2 class="admin-colla-title">
										<i class="fa fa-file-text-o" aria-hidden="true"></i>商品信息
									</h2>
									<div class="admin-colla-content">
										<div class="submain-table" style="overflow: visible;">
											<table class="layui-table table-static">
											 	<tr>
											 		<th width="80">商品图片</th>
											 		<th>商品编号</th>
											 		<th>商品名称</th>
											 		<th>规格</th>
											 		<th>数量</th>
											 		<th>商品参数</th>
											 		<th>商品单价</th>
											 		<th>金额小计</th>
											 		<th>备注</th>
											 	</tr>
											 	<tr>
											 		<td><img src="../../source/images/head.jpg" width="100%" class="goods-img img-hover-show"></td>
											 		<td>315621</td>
											 		<td>钢材 半径10mm</td>
											 		<td>10cm</td>
											 		<td>50</td>
											 		<td>120</td>
											 		<td>200.00</td>
											 		<td>500.00</td>
											 		<td>还可以</td>
											 	</tr>
											 	<tr>
											 		<td><img src="../../source/images/head.jpg" width="100%" class="goods-img img-hover-show"></td>
											 		<td>315621</td>
											 		<td>钢材 半径10mm</td>
											 		<td>10cm</td>
											 		<td>50</td>
											 		<td>120</td>
											 		<td>200.00</td>
											 		<td>500.00</td>
											 		<td>还可以</td>
											 	</tr>
											</table>
											<div  class="table-footer-wrapper">
									 			<ul>
									 				<li>
									 					<label>商品价格：</label>
									 					<span class="color-red num">2000.00</span>
									 				</li>
									 				<li>
									 					<label>物流费用：</label>
									 					<span class="color-red num">100.00
										 					<i class="i-detail">
										 						<span class="i-detail-span">详</span>
										 						<div class="i-detail-show">
										 							<ul>
										 								<li>厂址地址：<span>上海市浦东区</span></li>
										 								<li>送货地址：<span>上海市浦东区</span></li>
										 								<li>直线距离：<span>100km</span></li>
										 								<li>计算方式：<span>按体积计算</span></li>
										 								<li>货物体积：<span>100kg</span></li>
										 								<li>物流单价：<span>100元/公里*立方米</span></li>
										 								<li>物流总价：<span class="color-red">￥1000</span></li>
										 							</ul>
										 						</div>
										 					</i>
									 					</span>
									 				</li>
									 				<li>
									 					<label>合计：</label>
									 					<span class="color-red num">2100.00</span>
									 				</li>
									 			</ul>
										 	</div>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
					
					<!--发货信息-->
					<div class="layui-tab-item">
						<section class="order-topbox">
							<ul>
								<li>
									<div class="order-cardbox">订单号：DH-O-20170421-025345<span class="order-state">备货中</span></div>
								</li>
								<li>
									<div class="order-infobox">
										<span>揽货物流商：上海美智教育</span>
										<span>约定发货时间：2017-4-28  10:10:00</span>
									</div>
								</li>
							</ul>
						</section>
						<section class="admin-list-detail">
							<div class="admin-collapse">
								<div class="admin-colla-item">
									<h2 class="admin-colla-title">
										<i class="fa fa-file-text-o" aria-hidden="true"></i>出库/发货记录
									</h2>
									<div class="admin-colla-content">
										<div style="height: 40px;position: relative;">
											<div class="admin-tab-right">
												<span class="icon-wrapper">
													<button><i class="fa fa-print" aria-hidden="true"></i>打印</button>
													<button><i class="fa fa-share-square-o" aria-hidden="true"></i>导出</button>
													<button id="void-btn"><i class="layui-icon">&#xe640;</i>作废</button>
													<button type="button" class="ant-btn ant-btn-ghost" id="detail-deliverbtn"><span>发 货</span></button>
												</span>
											</div>
										</div>
										<div class="submain-table" style="overflow: visible;">
											<table class="layui-table table-static">
											 	<tr>
											 		<th width="30"></th>
											 		<th width="120">商品图片</th>
											 		<th>商品名称</th>
											 		<th>规格</th>
											 		<th>商品编码</th>
											 		<th>本次出库数</th>
											 	</tr>
											 	<tr>
											 		<td>1</td>
											 		<td><img src="../../source/images/head.jpg" width="100%" class="goods-img img-hover-show"></td>
											 		<td>宁波汤圆，宁波汤圆，宁波汤圆</td>
											 		<td>500g/袋</td>
											 		<td>23521521</td>
											 		<td>50袋</td>
											 	</tr>
											 	<tr>
											 		<td>2</td>
											 		<td><img src="../../source/images/head.jpg" width="100%" class="goods-img img-hover-show"></td>
											 		<td>宁波汤圆，宁波汤圆，宁波汤圆</td>
											 		<td>500g/袋</td>
											 		<td>23521521</td>
											 		<td>50袋</td>
											 	</tr>
											</table>
											<div  class="table-footer-wrapper">
									 			<div class="table-info">
									 				<span>出库信息</span>
									 				<span>出库编号：L-20170429-2001</span>
									 				<span>出库时间：2017-04-29 12：00</span>
									 				<span>出库仓库：宁波站</span>
									 			</div>
										 	</div>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
					<!--发货框-->
					<div>
						<div class="advanced-search-mask" id="advanced-search-mask" onclick="advanced_cancel()"></div>
						<div class="layui-layer layui-layer-dialog advanced-skin layer-anim" id="advanced-box">
							<div class="layui-layer-title">发货信息</div>
							<h3 class="sub-title">如确认已经发货，请填写发货信息：</h3>
							<div class="layui-layer-content" style="overflow: visible;">
								<div class="advanced-search">
									<div class="advanced-box">
										<div class="first-form">
											<form class="layui-form">
												<div class="layui-form-item">
													<label class="layui-form-label">发货日期</label>
													<div class="layui-input-block">
														<input onclick="layui.laydate({elem: this, festival: true})" type="text" name="issuance-data" autocomplete="off" placeholder="请选择发货日期" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">物流公司</label>
													    <div class="layui-input-block">
													      <select name="logistics-company">
													        <option value=""></option>
													        <option value="0">顺丰</option>
													        <option value="1">申通</option>
													        <option value="2">圆通</option>
													        <option value="3">天天快递</option>
													        <option value="4">汇通</option>
													      </select>
													    </div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">物流单号</label>
													<div class="layui-input-block">
														<input type="text" name="logistics-number" autocomplete="off" placeholder="请输入物流单号" class="layui-input">
													</div>
												</div>
											</form>
											<div class="layui-form">
												<div class="layui-form-item">
													<label class="layui-form-label">物流备注</label>
													<div class="layui-input-block">
														<textarea name="logistics-mark" placeholder="请物流备注" class="layui-textarea"></textarea>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-layer-btn">
								<a class="layui-layer-btn0" id="advanced-yes">确 定</a>
								<a class="layui-layer-btn1" id="advanced-cancel" onclick="advanced_cancel()">取 消</a>
							</div>
						</div>
					</div>
					
					
					<!--收款信息-->
					<div class="layui-tab-item">
						<section class="order-topbox">
							<ul>
								<li>
									<div class="order-cardbox">订单号：DH-O-20170421-025345</div>
								</li>
								<li>
									<div class="order-infobox">
										<span>订单金额：222.00</span>
										<span>已付款：222.00</span>
										<span>待确认：</span>
										<span>待支付：0.00</span>
									</div>
								</li>
							</ul>
						</section>
						<section class="admin-list-detail">
							<div class="submain-table" style="overflow: visible;">
								<table class="layui-table table-static table-gathering">
								 	<tr>
								 		<th>支付流水号</th>
								 		<th>时间</th>
								 		<th>付款金额</th>
								 		<th>支付方式</th>
								 		<th>状态</th>
								 		<th>操作</th>
								 	</tr>
								 	<tr>
								 		<td>f-20170429101232-25632</td>
								 		<td>2017-04-29  10:00:00</td>
								 		<td>2000.00</td>
								 		<td>支付宝</td>
								 		<td class="gather-state">已付款</td>
								 		<td class="gather-caozuo">
								 			<a href="javascript::void;">订单详情</a>
								 		</td>
								 	</tr>
								 	<tr>
								 		<td>f-20170429101232-25632</td>
								 		<td>2017-04-29  10:00:00</td>
								 		<td>2000.00</td>
								 		<td>支付宝</td>
								 		<td class="gather-state">未付款</td>
								 		<td class="gather-caozuo">
								 			<a href="javascript::void;">订单详情</a>
								 			<a href="#">付款</a>
								 		</td>
								 	</tr>
								</table>
							</div>
						</section>
					</div>
					
				</div>
			</div>
		</div>
		
		<script src="../../source/plugins/layui/layui.js"></script>
		<script src="../../source/plugins/datatables/jquery-1.12.4.js"></script>
		<script src="../../source/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="../../source/plugins/datatables/dataTables.fixedColumns.js"></script>
		<script src="../../source/js/datatables-config.js"></script>
		<script src="../../source/js/system.js"></script>
		<script>
			
			layui.use(['element', 'layer'], function(){
			  	
			  	//点击保存跳转到发货信息tab  订单详情
			  	$("#datail-savebtn").on("click", function(){
			  		$("#one-tab").find("li").eq(1).click();
			  	})
			  	
			  	$("#detail-deliverbtn").on('click', function() {//点击发货，弹出弹框
					$("#advanced-box, #advanced-search-mask").css("display", "block");
				})

				$("#advanced-yes").on("click", function() {//点击发货中确定按钮，弹出信息框
					var parent = $("#advanced-box");
					var issuance_data = parent.find('[name="issuance-data"]').val();
					var logistics_company = parent.find('[name="logistics-company"]').val();
					var logistics_number = parent.find('[name="logistics-number"]').val();
					var logistics_mark = parent.find('[name="logistics-mark"]').val();
					$.ajax({
						url: options.url,
						data: {
							issuance_data: issuance_data,
							logistics_company: logistics_company,
							logistics_number: logistics_number,
							logistics_mark: logistics_mark
						},
						type: "post",
						dataType: "json",
						beforeSend: function() {
							advanced_cancel();
							layer.load(0);
						},
						success: function(data) {
							//处理事件
							layer.closeAll();
						}
					});
				})
			  	
			  	//点击作废，弹出框
				$("#void-btn").on('click', function(){
					var voidhtml = '<div class="content-voidbox"><h3>请确认是否作废？</h3><h3>如确认是否作废，请填写作废原因</h3><textarea name="void-reason"></textarea></div>';
					layer.open({
						type: 1,
						title: '确认作废',
						content: voidhtml,
						btn: ['确定', '取消'],
						shade: 0.08,
						area: ['560px'],
						yes: function(index, layero){
				    		var void_reason = $('textarea[name="void-reason"]').val();
				    		$.ajax({
								url: url,
								data: {
									void_reason: void_reason
								},
								type: "post",
								dataType: "json",
								success: function(data) {
									//处理事件
									layer.close(index);
								}
							});
					  	},
					})
				})
			  	
			})
			
			
			//清理高级搜索的val值
			function advanced_clear() {
				$("#advanced-box").find('input[type="text"]').val("");
			}

			//关闭高级搜索
			function advanced_cancel() {
				$("#advanced-box, #advanced-search-mask").css("display", "none");
			}
		</script>
	</body>

</html>